import React, { useContext } from "react";
import { RouteObject } from 'react-router-dom';
import Layout from '@/layout';
import Today from '@/pages/Today';

// const Today = React.lazy(() => import('@/pages/About'));
const Tomorrow = React.lazy(() => import('@/pages/Tomorrow'));
const Week = React.lazy(() => import('@/pages/Week'));
const Month = React.lazy(() => import('@/pages/Month'));
const Year = React.lazy(() => import('@/pages/Year'));

interface ILayoutRouteProps {
    element: React.ReactNode | null;
    children: RouteObject[];
}

const routes: Array<ILayoutRouteProps | RouteObject> = [
    {
        path: '/',
        element: <Layout />,
        children: [
            {
                index: true,
                element: <Today />
            }, {
                path: '/tomorrow',
                element: <Tomorrow />,
                lazy: true
            },  {
                path: '/week',
                element: <Week />,
                lazy: true,
            }, {
                path: '/month',
                element: <Month />,
                lazy: true,
            }, {
                path: '/year',
                element: <Year />,
                lazy: true,
            }
        ]
    }
];

function setRoutes (routes: Array<ILayoutRouteProps | RouteObject>) {
    const translateRoutes = routes.map((r, index) => {
        // if (r.auth && r.auth.length) {
        //     r.element = <Auth auth={r.auth}>
        //                     {r.element}
        //                 </Auth>
        // }
        if (r.children && (r.children as RouteObject[]).length) {
            r.children = setRoutes(r.children as RouteObject[]);
        }
        r.element = (r as RouteObject).lazy ? <React.Suspense fallback={
                    <div>加载中...</div>
                }>{r.element}</React.Suspense> : <>{r.element}</>
        return r;
    });
    return translateRoutes;
}

// function Auth (props) {
//     const { auth, children } = props;
//     return (
//         <>
//             {children}
//         </>
//     );
// }

export default setRoutes(routes);
